<template>
  <div class="user-center">
    <Header />
    <Breadcrumb :items="[{ text: '首页', to: '/' }, { text: '个人中心', active: true }]" />
    
    <div class="container my-5">
      <div class="row">
        <div class="col-md-3">
          <div class="card">
            <div class="card-body text-center">
              <img :src="user.avatar || '/static/images/default-avatar.png'" class="rounded-circle mb-3" width="100" height="100">
              <h5>{{ user.nickname || user.username }}</h5>
              <p class="text-muted">{{ user.email }}</p>
            </div>
            
            <ul class="list-group list-group-flush">
              <li class="list-group-item">
                <router-link to="/user/center" class="text-dark">个人资料</router-link>
              </li>
              <li class="list-group-item">
                <router-link to="/user/center/password" class="text-dark">修改密码</router-link>
              </li>
              <li class="list-group-item">
                <a href="#" @click.prevent="logout" class="text-dark">退出登录</a>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="col-md-9">
          <div class="card">
            <div class="card-header">
              <h4>个人资料</h4>
            </div>
            
            <div class="card-body">
              <form @submit.prevent="updateProfile">
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label">用户名</label>
                  <div class="col-sm-9">
                    <input type="text" readonly class="form-control-plaintext" :value="user.username">
                  </div>
                </div>
                
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label">昵称</label>
                  <div class="col-sm-9">
                    <input type="text" v-model="form.nickname" class="form-control">
                  </div>
                </div>
                
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label">邮箱</label>
                  <div class="col-sm-9">
                    <input type="email" v-model="form.email" class="form-control">
                  </div>
                </div>
                
                <div class="form-group row">
                  <label class="col-sm-3 col-form-label">手机号</label>
                  <div class="col-sm-9">
                    <input type="text" v-model="form.phone" class="form-control">
                  </div>
                </div>
                
                <div class="form-group row">
                  <div class="col-sm-9 offset-sm-3">
                    <button type="submit" class="btn btn-primary" :disabled="loading">
                      <span v-if="loading" class="spinner-border spinner-border-sm" role="status"></span>
                      保存修改
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Breadcrumb from '@/components/Breadcrumb'
import { getUserInfo, updateUserInfo } from '@/api/user'
import { removeToken } from '@/utils/auth'

export default {
  name: 'UserCenter',
  components: {
    Header,
    Footer,
    Breadcrumb
  },
  data() {
    return {
      user: {},
      form: {
        nickname: '',
        email: '',
        phone: ''
      },
      loading: false
    }
  },
  created() {
    this.fetchUserInfo()
  },
  methods: {
    async fetchUserInfo() {
      try {
        const res = await getUserInfo()
        this.user = res.data
        this.form = {
          nickname: res.data.nickname || '',
          email: res.data.email || '',
          phone: res.data.phone || ''
        }
      } catch (error) {
        this.$notify.error({
          title: '错误',
          message: '获取用户信息失败'
        })
      }
    },
    async updateProfile() {
      this.loading = true
      try {
        await updateUserInfo(this.form)
        this.$notify({
          title: '成功',
          message: '资料更新成功',
          type: 'success'
        })
        this.fetchUserInfo()
      } catch (error) {
        this.$notify.error({
          title: '错误',
          message: error.response?.data?.message || '更新失败'
        })
      } finally {
        this.loading = false
      }
    },
    logout() {
      removeToken()
      this.$router.push('/login')
      this.$notify({
        title: '成功',
        message: '您已成功退出登录',
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
.user-center {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.card {
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.list-group-item {
  padding: 12px 20px;
}

.list-group-item a {
  text-decoration: none;
}

.list-group-item:hover {
  background-color: #f8f9fa;
}

.form-control-plaintext {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
}
</style>